<script>
import { reactive, toRefs, ref, onMounted, getCurrentInstance } from "vue";

import Table from "./components/Table.vue";
export default {
  components: { Table },
  setup() {
    const state = reactive({
      total: 100,
      pageSize: 10,
      formDataSys: { mkModelName: "", mkModelAdd: "", mkArea: "", mkRem: "" }, //pinia
      tableData: [],
      mapLabel: { "marketId": "商场ID", "mkAdd": "商场地址", "mkArea": "商场面积", "mkLati": "商场纬度", "mkLong": "商场经度", "mkModelAdd": "商场模型地址", "mkModelName": "商场模型名称", "mkName": "商场名称", "mkRecId": "商场记录ID", "mkRem": "商场备注" },
      tableLabel: ["marketId", "mkAdd", "mkArea", "mkLati", "mkLong", "mkModelAdd", "mkModelName", "mkName", "mkRecId", "mkRem"],
      formDataPost: ["marketId", "mkAdd", "mkArea", "mkLati", "mkLong", "mkModelAdd", "mkModelName", "mkName", "mkRecId", "mkRem"],
      formDataGet: ["marketId", "mkAdd", "mkArea", "mkLati", "mkLong", "mkModelAdd", "mkModelName", "mkName", "mkRecId", "mkRem"],
      formDataPut: ["marketId", "mkAdd", "mkArea", "mkLati", "mkLong", "mkModelAdd", "mkModelName", "mkName", "mkRecId", "mkRem"],
    });

    const tableRef = ref();
    const { proxy } = getCurrentInstance();

    const getTableData = async (currentPage, queryKey) => {
      const params = {
        pageNum: currentPage,
        pageSize: state.pageSize
      }
      const data = await proxy.$API.sysConfig.sysMarketList.get(params)
      state.total = data.total
      state.tableData = data.rows

      state.formDataSys = data.rows[0]
    };

    const postTableData = async (data) => {
      const res = await proxy.$API.sysConfig.sysMarketPost.post(data)
      if (res.code==200) {
        //调用成功
        tableRef.value.dialogVisible = false;
        ElMessage.success({
          message: "成功",
          type: "success",
        });
        getTableData(1)
      } else {
        //调用失败
        ElMessage.error(res.msg);
      }
    };

    const deleteTableData = async (data) => {
      const params = {
        id: data.mkRecId,
      }
      const res = await proxy.$API.sysConfig.sysMarketDelete.delete(params)
      if (res.code==200) {
        //调用成功
        ElMessage.success({
          message: "成功",
          type: "success",
        });
        getTableData(1)
      } else {
        //调用失败
        ElMessage.error(data.msg);
      }
    };

    const putTableData = async (row, data) => {

      const res = await proxy.$API.sysConfig.sysMarketPut.put(data)

      if (res.code==200) {
        //调用成功
        tableRef.value.dialogVisible = false;
        ElMessage.success({
          message: "成功",
          type: "success",
        });
        getTableData(1)
      } else {
        //调用失败
        ElMessage.error(res.msg);
      }
    };

    // const deleteAllTableData = (data) => {
    //   console.log(data);
    // };

    return {
      ...toRefs(state),
      tableRef,
      postTableData,
      deleteTableData,
      putTableData,
      getTableData,
      // deleteAllTableData,
    };
  },
};
</script>


<template>
  <div class="card-container">
    <el-card shadow="never">
      <template #header>商场基本信息设置</template>
      <el-form label-position="right" label-width="100px" :model="formDataSys">
        <el-form-item label="商场名称">
          <el-input v-model="formDataSys.mkModelName" />
        </el-form-item>
        <el-form-item label="商场地址">
          <el-input v-model="formDataSys.mkModelAdd" />
        </el-form-item>
        <el-form-item label="占地面积">
          <el-input v-model="formDataSys.mkArea" />
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="formDataSys.mkRem" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary">修改</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card shadow="never" style="margin-top: 20px">
      <Table ref="tableRef" deleteButton :mapLabel="mapLabel" :tableData="tableData" :tableLabel="tableLabel"
        :formDataPost="formDataPost" :formDataPut="formDataPut" :formDataGet="formDataGet" :total="total"
        :pageSize="pageSize" @postTableData="postTableData" @deleteTableData="deleteTableData"
        @putTableData="putTableData" @getTableData="getTableData" />
    </el-card>
  </div>
</template>

<style scoped>
.card-container {
  padding: 20px;
}
</style>